<template>
  <van-cell-group v-if="viewLoading" style="padding-bottom: 55px;">
    <van-cell title="打款账号" :value="resData.buy_user.account" />
    <van-cell title="打款手机号" :value="resData.buy_user.cellphone" />
    <van-cell title="打款云付通" :value="resData.buy_user.cloud_account" />
    <van-cell title="打款名称" :value="resData.buy_user.name" />
    <van-cell title="收款数量" :value="resData.user_mutually_sell_average.amount" />
    <van-cell title="收款时间" :value="dayjs(resData.user_mutually_sell_average.receive_time*1000).format('MM-DD HH:mm:ss')" />

    <div class="van-cell van-hairline van-field" v-if="resData.user_mutually_buy_average.image">
      <div class="van-cell__title"><span>收款图片<br /><small>(点击打开)</small></span></div>
      <div class="van-cell__value"><img :src="config.uploadUrl+resData.user_mutually_buy_average.image" style="height: 100px;" @click="onImagePreview"></div>
    </div>

    <van-field class="van-cell--center" type="password" placeholder="请输入安全密码" name="safe_password" required
      label="安全密码" v-model="formFields.safe_password"
      :error="errors.has('safe_password')" :error-message="errors.first('safe_password')"
      data-vv-as="安全密码" v-validate="{required: true, min: 6}"
    />

    <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">确认收款</van-button>
  </van-cell-group>
</template>

<script>
  import dayjs from 'dayjs';
  import { mapState } from 'vuex';
  import { Button, Cell, CellGroup, Field, ImagePreview, Toast } from 'vant';
  import userMutuallySellApi from '@/api/user/mutually/sell/index';
  import config from '@/config';

  export default {
    components: {
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field
    },
    data() {
      return {
        matchTimeCountDown: '',
        resData: {},
        formFields: {
          safe_password: ''
        },
        onResetMatchButtonLoading: false,
        onButtonLoading: false,
        viewLoading: false,
        config
      };
    },
    methods: {
      onImagePreview(e) {
        ImagePreview([e.target.currentSrc], 1);
      },
      onSubmit() {
        this.onButtonLoading = true;
        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            userMutuallySellApi.updateStatusByToken(this.resData.user_mutually_sell_average.id, 90, this.formFields).then((res) => {
              Toast(res.msg);
              if(parseInt(res.code) !== 0) {
                this.onButtonLoading = false;
                return false;
              }

              setTimeout(() => {
                Toast.clear();
                this.$router.push({ name: 'mutuallySellRecord' });
              }, 1000);
            }).catch(()=>{
              this.onButtonLoading = false;
            });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
          }
        }).catch(() => {
          this.onButtonLoading = false;
        });
      },
      getData() {
        userMutuallySellApi.findFristByIdAndToken(this.$route.query.id).then((res) => {
          this.resData = res;
          this.viewLoading = true;
        });
      },
      dayjs: dayjs
    },
    computed: mapState({
      configApi: state => state.configApi,
    }),
    created() {
      this.$store.dispatch('configApi/get').then((res) => {
        this.getData();
      });
    }
  }
</script>
